<script>
export default {
  name: 'Result',
  head() {
    return {
      title: '预约结果',
    };
  },
  validate({ query }) {
    return !!query.subscribeId;
  },
  data() {
    return {
      subscribeId: this.$route.query.subscribeId,
    };
  },
  computed: {
    result() {
      return this.subscribeId
        ? {
            label: '预约提交成功',
            class: 'icon-success success--text',
          }
        : {
            label: '预约提交失败',
            class: 'icon-failed icon-failed-color',
          };
    },
  },
  render() {
    return (
      <div class="d-flex flex-column flex-center-cross pt-16">
        <i class={[this.result.class, 'icon']}></i>
        <span class="font-xl mt-4">{this.result.label}</span>
        <footer class="mt-16 d-flex px-10 flex-center-main">
          <van-button class="mr-1" type="primary" plain round block onClick={() => this.goTo({ name: 'home' })}>
            返回首页
          </van-button>
          {this.subscribeId && (
            <van-button
              type="primary"
              round
              block
              onClick={() => this.goTo({ name: 'application-detail', query: { subscribeId: this.subscribeId } },{replace:true})}
            >
              查看订单
            </van-button>
          )}
        </footer>
      </div>
    );
  },
};
</script>
<style scoped lang="less">
.icon {
  font-size: 75px;
  &-failed-color {
    color: #f95155;
  }
}
footer {
  width: 100%;
  .van-button {
    max-width: 50%;
  }
}
</style>
